﻿<!DOCTYPE html>
<html>
 <head>
        <title>区域医疗大数据系统BI可视化后台</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <!-- jQuery AND jQueryUI -->
        <script type="text/javascript" src="js/libs/jquery/1.6/jquery.min.js"></script>
        <script type="text/javascript" src="js/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
        
        <!-- Compressed Version
        <link type="text/css" rel="stylesheet" href="min/b=CoreAdmin&f=css/reset.css,css/style.css,css/jqueryui/jqueryui.css,js/jwysiwyg/jquery.wysiwyg.old-school.css,js/zoombox/zoombox.css" />
        <script type="text/javascript" src="min/b=CoreAdmin/js&f=cookie/jquery.cookie.js,jwysiwyg/jquery.wysiwyg.js,tooltipsy.min.js,iphone-style-checkboxes.js,excanvas.js,zoombox/zoombox.js,visualize.jQuery.js,jquery.uniform.min.js,main.js"></script>
        -->
        <link rel="stylesheet" href="css/min.css" />
        <script type="text/javascript" src="js/min.js"></script>
        <!-- 引入 echarts.js -->
        <script src="js/echarts.min.js"></script>
    </head>
    <body>
        
    <script type="text/javascript" src="content/settings/main.js"></script>
    <link rel="stylesheet" href="content/settings/style.css" />


  <div class="settings" id="settings"></div>
        <!--   HEAD -->
        <div id="head">
            <div class="left">
                区域医疗大数据系统可视化管理界面
            </div>
            <div class="right">

            </div>
        </div>
                
                
        <!--            
                SIDEBAR
                         --> 
        <div id="sidebar">
            <ul>
                <li>
                    <a href="index">
                        <img src="img/icons/menu/inbox.png" alt="" />
                        BI仪表盘概览
                    </a>
                </li>
                <li class="current"><a href="#"><img src="img/icons/menu/layout.png" alt="" /> 病例离线数据分析</a>
                    <ul>
                                                <li class="current"><a href="dashboard.html?p=index">病例随机抽取</a></li>
                                                <li><a href="forms.html?p=forms">病例范围占比统计</a></li>
                                                <li><a href="table.html?p=table">Top10热门病种</a></li>
                                                <li><a href="tabs.html?p=tabs">名区域top3病种统计</a></li>
                                            </ul>
                </li>
                <li><a href="#"><img src="img/icons/menu/brush.png" alt="" /> 药物分析</a>
                    <ul>
                        <li><a href="#">Fake menu #1</a></li>
                        <li><a href="#">Fake menu #2</a></li>
                        <li><a href="#">Fake menu #3</a></li>
                    </ul>
                </li>
                <li><a href="#"><img src="img/icons/menu/lab.png" alt="" /> 区域实时数据分析</a>
                    <ul>
                        <li><a href="#">病例实时流量分析</a></li>
                        <li><a href="#">名省热门病例实时统计</a></li>
                        <li><a href="#">最近一天病例实时流量统计</a>
                        </li>
                    </ul>
                </li>

            </ul>


        </div>

        <!--            
              CONTENT 
                        --> 
        <div id="content" class="white">
            <h1><img src="img/icons/dashboard.png" alt="" /> 病例离线数据分析
</h1>

<div class="cb">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        myChart.showLoading();  // 开启 loading 效果
        // [
        //     {
        //         "taskId":"1",
        //         "visitCount":5,
        //         "visit_day_1d_3d_ratio":5,
        //         "visit_day_4d_6d_ratio":7,
        //         "visit_day_7d_9d_ratio":10,
        //         "visit_day_10d_30d_ratio":45,
        //         "visit_day_30d_60d_ratio":78,
        //         "visit_day_60d_ratio":74,
        //         "step_day_1_3_ratio":12,
        //         "step_day_4_6_ratio":3,
        //         "step_day_7_9_ratio":99,
        //         "step_day_10_30_ratio":5,
        //         "step_day_30_ratio":6,
        //         "createTime":1626692674000
        //     }
        // ]

            $.get('http://localhost:8888/patientAgg', function (data) {
                var keys=[];//获取data[0]的键

                for(var i in data[0]){
                    if ( i=="createTime") break;
                    keys.push(i);//i就是它的键
                }
                var values=[];//获取data[0]的值
                for(var i in data[0]) {//i是键
                    if ( i=="createTime") break;
                    var dict={};
                    dict["value"]=data[0][i];
                    dict["name"]=i;
                    values.push(dict)
                }

                // var keys_json=JSON.parse(keys);
                var values_json = JSON.parse(JSON.stringify(values));

                myChart.hideLoading();  // 隐藏 loading 效果
                myChart.setOption({
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center',
                        data: keys
                    },
                    series : [
                        {
                            name: '病例各个范围治愈时长占比(%), 各个范围来院次数占比（%）',
                            type: 'pie',    // 设置图表类型为饼图
                            radius: ['40%', '70%'],  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的长度。
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                             data: values_json
                        }
                    ]
                })
            }, 'json');

        // 使用刚指定的配置项和数据显示图表。
        //myChart.setOption(option);
    </script>

</div>

</div>
        
    <style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>

</body>
</html>